html {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  &::before,
  &::after {
    box-sizing: inherit;
  }
}

body {
  background-color: #030f33;
  overflow-x: hidden;
  overflow-y: hidden;
  -webkit-overflow-scrolling: auto;
}

$list: 5, 4, 3, 2, 1, 2, 3, 4, 5;
$size: 1, 2, 3, 4, 5, 4, 3, 2, 1;

@function list_remove($list, $index) {
  $new_list: ();
  @for $i from 1 through length($list) {
    @if $i != $index {
      $new_list: append($new_list, nth($list, $i));
    }
  }
  @return $new_list;
}

@function cal_box_shadow($i) {
  $x: null;
  @for $j from 1 through $i {
    $x: append(
      $x,
      0px
        0px
        0px
        nth($size, $j) *
        20px
        rgba(255, 255, 255, nth($list, $j) * 0.02),
      comma
    );
    @if $j > 5 {
      $x: list_remove($x, 10 - $j + 1);
    }
  }
  @return $x;
}

@keyframes shine {
  @for $i from 1 to 10 {
    $fram: (10 * $i) * 1%;
    #{ $fram } {
      box-shadow: cal_box_shadow($i);
      z-index: -1000;
    }
  }
}

@keyframes cloud_move_left {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-10px, -10px);
  }
  0% {
    transform: translate(0, 0);
  }
}

@keyframes cloud_move_right {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(10px, 10px);
  }
  0% {
    transform: translate(0, 0);
  }
}

@mixin cloud {
  width: 350px;
  height: 120px;
  background: linear-gradient(to top, #022f5c 11%, #013669 100%);
  box-shadow: 0 37px 64px -40px #000;
  border-radius: 100px;
  position: absolute;
  margin: 120px auto 20px;
  &::before,
  &::after {
    content: "";
    position: absolute;
    background: #022f5c;
    z-index: -11;
    box-shadow: 0 -5px 136px -40px #000;
  }
  &::before {
    width: 180px;
    height: 180px;
    top: -90px;
    right: 50px;
    border-radius: 200px;
  }
  &::after {
    width: 100px;
    height: 100px;
    top: -50px;
    left: 50px;
    border-radius: 100px;
  }
}

.clouds {
  position: relative;
  top: -210px;
  left: -210px;
  bottom: 0;
  $count: var(--count, 20);
  @for $y from 1 through 20 {
    .cloud_#{$y} {
      @include cloud;
      top: 50px;
      left: random() * 120 + $y * 0.1vmax;
      transition: all 0.2s ease-in-out;
      @if $y % 2 == 0 {
        animation: cloud_move_right 10s 1s infinite;
      } @else {
        animation: cloud_move_left 10s 1s infinite;
      }
    }
  }
}

.artwork {
  position: relative;
  top: -453px;
  min-width: 529px;
  .moon-glow {
    position: relative;
    width: 400px;
    height: 400px;
    margin: 118px auto;
    background-color: white;
    border-radius: 50%;
    top: -53px;
    box-shadow: 0 0 64px 0 rgba(255, 255, 255, 0.41);
  }
  .moon {
    width: 400px;
    height: 400px;
    margin: 118px auto;
    background-color: white;
    border-radius: 50%;
    transition: all 0.2s ease-in-out;
    position: relative;
    top: -570px;
    animation: shine 16s 1s infinite;
  }
  .land {
    border-radius: 46%;
    position: relative;
    width: 666px;
    height: 239px;
    background-color: #030f33;
    top: -1022px;
    margin: 20px auto;
    &::after {
      content: "";
      height: 183px;
      width: 855px;
      background-color: #030f33;
      position: absolute;
      top: 61px;
      margin: 0 auto;
      border-radius: 100px 1000px 0 0;
      left: -92px;
    }
  }
  .elk {
    position: relative;
    top: -970px;
    left: -3px;
    width: 171px;
    margin: 10px auto;
    height: 209px;
    background: url(./elk.png) no-repeat;
    background-size: 190px;
  }
}
